@import "../styles/variables";

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: $spacing-4;

  @media (min-width: $breakpoint-md) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-card {
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  transition: $transition-base;
  border: 1px solid #f1f5f9;
  height: 100%;

  &.clickable {
    cursor: pointer;

    &:hover {
      transform: translateY(-2px);
      box-shadow: $shadow-md;
    }
  }
}

.stat-content {
  display: flex;
  align-items: center;
  gap: $spacing-4;
  padding: $spacing-4;
}

.stat-icon-wrapper {
  width: 56px;
  height: 56px;
  font-size: 24px;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: $font-semibold;
  line-height: 1.2;
  color: $text;
}

.stat-title {
  font-size: $text-sm;
  color: $text-secondary;
}

.department-stats-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.department-stat-item {
  padding: 16px;
  border-radius: 12px;
  background-color: #f9fafb;
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    background-color: #f3f4f6;
    transform: translateX(4px);
  }
}

.department-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.department-stat-name {
  display: flex;
  align-items: center;
}

.inner-stat-card {
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
}

.card-title-with-icon {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
}

.empty-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f9fafb;
  border-radius: 8px;
}
